<template>
	<view>
		<cu-custom bgColor="theme-bg-color" :isBack="true">
			<block slot="content">请 假 申 请 </block>
		</cu-custom>

		<view class='bg-white margin-xs'>
			<view class='dashed-bottom padding-bottom-lg padding-top-xs' v-if="LeaveRecordList.length>0"
				v-for="(item,index) in LeaveRecordList">
				<view class="flex ">
					<view class="padding-left-xs">
						<view class="text-md text-bold margin-bottom-xs ">请假时间：{{formatDateTime(item.BeginTime)}} ~ {{formatDateTime(item.EndTime)}}</view>
						<view class="text-md margin-bottom-xs">请假人:{{item.CreatorAppUserDto.Name}}</view>
						<view class='margin-bottom-xs text-md'><text>请假原因:</text><text
								class='margin-left-xs  '>{{item.Reason}}</text></view>
						<view class="bg-img margin-top-sm" style="width: 240rpx; height: 240rpx;">
							<image :src="item.ImageUrls" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 12rpx;"></image>
						</view>			
					</view>
				</view>
				<view class='margin-top-xs'>
					<view class='margin-bottom-xs' v-if='item.AuditStatus==0'>><text>审核结果:</text><text
							class='margin-left-xs cu-tag ' {{item.AuditStatusFormat}}</text></view>
					<view class='margin-bottom-xs' v-if='item.AuditStatus==1'><text>审核结果:</text><text
							class='margin-left-xs cu-tag  bg-green'>{{item.AuditStatusFormat}}</text></view>

					<view class='margin-bottom-xs' v-if='item.AuditStatus==2'><text>审核结果:</text><text
							class='margin-left-xs cu-tag bg-red'>{{item.AuditStatusFormat}}</text></view>

					<view class='margin-bottom-xs' v-if="item.Reply"><text>回复内容:</text><text
							class='margin-left-xs  '>{{item.Reply}}</text></view>
				</view>
				<view class='margin-top-xs flex  justify-end '>
					<view class='cu-btn round bg-cyan sm' @click="Cancel(item)" v-if="item.AuditStatus==0">取消申请</view>
				</view>

			</view>
			<view v-else>
				<cu-no-data></cu-no-data>
			</view>
		</view>

		<view class="fixed-bottom">
			<button class="cu-btn block theme-bg-color margin-tb-sm lg" @click="MyLeaveSubmit()">我要请假</button>

		</view>
	</view>
</template>

<script>
	import store from "@/store";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				keyword: "",
				Where: {},
				LeaveRecordList: []
			}
		},
		computed: {
			...mapGetters([
				'token', 'RoleTypeFormat', "userInfo", "userId"
			])
		},
		onLoad(option) {
			if (!this.userInfo.OrganizationId) {
				this.$comm.ShowToast("你还未加入班级");
				uni.navigateBack()
				return;

			}
			this.LeaveRecordListApi();
		},
		onShow() {

		},
		methods: {
			formatDateTime(dateTimeStr) {
                if (!dateTimeStr) return '';
                return dateTimeStr.split(':').slice(0, 2).join(':');
            },
			/**
			 * 我的记录
			 */
			async LeaveRecordListApi() {
				let {
					Data: {
						Items
					}
				} = await this.$http.PostAsync("/LeaveRecord/List", {
					UserId: this.userInfo.Id,

				});
				this.LeaveRecordList = Items;
			},
			async Cancel(item) {
				let confirm = await this.$comm.ShowModal("你确定要取消申请吗?");

				if (confirm == false) {
					await this.$comm.ShowToast("用户放弃操作");
					return;
				}

				let {
					Data,
					Success,
				} = await this.$http.PostAsync("/LeaveRecord/Delete", {
					Id: item.Id
				});
				if (Success) {
					await this.$comm.ShowToast("提交成功");
					this.LeaveRecordListApi();
				}
			},

			async MyLeaveSubmit() {
				uni.navigateTo({
					url: "/pages/LeaveRecord/LeaveRecordEdit"
				})
			}
		}
	}
</script>

<style>

</style>